<template>
    <div class='body'>
      <div style='width:95%;margin: auto;height: 6px;background-color:#4D607E;border-radius: 4px '></div>
      <div class='bag'>
        <div class='head'>
          <div class='head-list'>
            <p style='text-align:center;font-size: 23px'> {{PayDetailInfo.parkName}}</p>
          </div>
          <div class='head-list' style='display: flex;flex-direction: row;justify-content: center'>
            <p style='text-align:center;font-size: 17px;margin-right: 5px'> {{PayDetailInfo.plateNo}}</p> <van-button class='seimg' size="small" v-if='hasImg'  @click='seeImg'>查看图片</van-button>
          </div>
          <div class='head-list'>
            <p style='text-align:center;font-size: 15px '>时间{{PayDetailInfo.parkInTime}}<span>，</span>时长{{handStateTime}}</p>
          </div>
        </div>
        <div class='content'>
          <van-cell-group>
            <van-cell class='content-list' title="预交费" :value="handRePay"  />
            <van-cell class='content-list' title="停车费" :value="handFee" />
            <van-cell class='content-list' title="优惠" value="￥0.00"  />
            <van-cell class='content-list' title="需交费" :value="handneedPay" />
          </van-cell-group>
        </div>
        <div style='width: 92%;margin:10px auto' class='btndiv' @click='payFee'>
          <van-button class='paybtn' size="large" >{{PayTitle}}</van-button>
        </div>
      </div>
      <div class='yewei' style='width: 95%;margin: auto'>
        <img style='width: 100%;height: 30px' src='../PayDetail/image/yewei.png' />
      </div>
      <div style="padding:15px;text-align:center;background: #F7F6F6">
        <span style="color:#3DA6FF;font-size: 12px">
        请支付完成后在{{handlastTime}}内离场，超时重新计费
        </span>
      </div>
      <!--图片弹层-->
      <van-popup v-model="showImg" style='width: 99%'>
        <div>
          <!--<img  :src='imgSrc'/>-->
          <van-swipe :autoplay="3000"  >
            <van-swipe-item v-for="(item, index) in imgSrcAry" :key="index">
              <img  :style="styleObject" :src="item" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div>
          <van-button  size="large"  @click='closeImg'>取消</van-button>
        </div>
      </van-popup>
    </div>
</template>

<script>
  import {getJNPayOpenid, inParkPay,findParkInfo} from '../../api/nearPark/nearPark'
  import { Toast } from 'vant';
  import { Dialog } from 'vant';
    export default {
      name: 'PayDetail',
      data() {
        return {
          imgSrcAry:[],
          showImg: false,
          PayDetailInfo:'',
          toPayInfo:'',
          JNOpenId:'',
          ZQOpenId:'',
          hasImg:true,
          PayTitle:'', //支付按钮状态
          ScreenWidth:'',  //屏幕宽度
          ImgDivHight:'', //缩放高度
          styleObject:''  //样式对象
        }
      },
      beforeMount(){
        var that=this
        // ----获取code---
        var  _code = this.$route.query.code
        var _VALurl=this.$route.query.Info  //获取参数
        var urlstr=decodeURI(_VALurl)
        var _urlAry=JSON.parse(urlstr)   //转对象
        if(_code){
          //取openid
          getJNPayOpenid(_code).then((res)=>{
            // --- 济南openid
            that.JNOpenId=res
            if(urlstr!=undefined){
              // ---- 章丘openid
              this.ZQOpenId=_urlAry.zqopenid
              //--查询所需要的数据
              var PlateInfo={
                plateColor:_urlAry.CarColor,
                plateNo:_urlAry.CarNo
              }
              //-查询--
              findParkInfo(PlateInfo).then((res)=>{
                if(res.code!='00'){  //在停
                  this.PayDetailInfo=res //获取信息赋值
                  //照片处理
                  if((res.enterImage!=null && res.enterImage!=undefined) ||(res.placeImage!=null && res.placeImage!=undefined)){  //照片不为空的
                    if(res.enterImage!=null && res.enterImage!=undefined){
                      this.imgSrcAry.push(res.enterImage)  //入场照片
                    }
                    if(res.placeImage!=null && res.placeImage!=undefined){
                      this.imgSrcAry.push(res.placeImage) //在停照片
                    }
                    this.hasImg=true   //有照片 显示照片按钮
                  }
                  // 费用判别
                  if(res.parkFee > res.advancePayment){  //应付大于预付 存在费用
                    this.PayTitle='支付'  //存在费用 显示支付按钮
                  }
                  else if(res.parkFee = res.advancePayment){   //应付 预付相等  不存在费用
                    this.PayTitle='已缴纳费用'  //存在费用 显示支付按钮
                  }
                }
                else{  //非在停
                  this.$router.replace({
                    path:'/fastPay'
                  })
                }
              }, (err)=>{  //查询出错
                Dialog.alert({
                  title: '查询出错',
                  message: '<p style="text-align:center">请重试吧</p>',
                }).then(() => {
                  this.$router.replace('/fastPay')
                });
              })
            }else {  //页面传参未获取
              Dialog.alert({
                title: '发生错误',
                message: '<p style="text-align:center">请重试</p>',
              }).then(() => {
                this.$router.replace('/fastPay')
              });
            }
          },(err)=>{  //未获取code
            Dialog.alert({
              title: '网络错误',
              message: '<p style="text-align:center">请重试</p>',
            }).then(() => {
              this.$router.replace('/fastPay')
            });
          })
        }else{  //未获取code
          Dialog.alert({
            title: '网络错误',
            message: '<p style="text-align:center">请重试</p>',
          }).then(() => {
            this.$router.replace('/fastPay')
          });
        }
      },
      mounted() {
        this.ScreenWidth= window.screen.width
        // console.log('窗口宽度',this.ScreenWidth)
      },
      computed:{
        handFee(){  //实付
          if(this.PayDetailInfo.parkFee>0){
            var fee=(this.PayDetailInfo.parkFee/100).toFixed(2)
            var yuanStr='￥'+fee
            return yuanStr   //分-元
          }else{
            var yuanStr='￥ 0'
            return yuanStr
          }
        },
        handRePay(){  //预支
          if(this.PayDetailInfo.advancePayment>0){
            var fee=(this.PayDetailInfo.advancePayment/100).toFixed(2)
            var yuanStr='￥'+fee
            return yuanStr
          }else{
            var yuanStr='￥ 0'
            return yuanStr
          }
        },
        handneedPay(){  //需交费
          if(this.PayDetailInfo.parkFee>0){
            if(this.PayDetailInfo.parkFee > this.PayDetailInfo.advancePayment){
              var fee= (this.PayDetailInfo.parkFee-this.PayDetailInfo.advancePayment)/100
              var _fee=fee.toFixed(2)
              var yuanStr='￥'+_fee
              return yuanStr
            }
          }else {
            var yuanStr='￥ 0'
            return yuanStr
          }
        },
        handStateTime(){   //时长转换
          var t;
          var s=this.PayDetailInfo.parkTime
          if(s > 0){
            var hour = Math.floor(s/60);
            var min = s % 60;
            if(hour == 0) {
              t = '';
            } else {
              t = hour + "小时";
            }
            t += min + "分";
          }
          return t;
        },
        handlastTime(){  //剩余时长
          var t;
          var s=this.PayDetailInfo.remainTime
          if(s!=null){
            t = s
          }else {
            t='规定时间'
          }
          return t;
        }
      },
      methods: {
        //--查看图片
        seeImg(){
          //---图片处理 获取宽高
          if(this.PayDetailInfo.enterImage!=null){
            this.HandImgSzie(this.PayDetailInfo.enterImage)
            return
          }
          if(this.PayDetailInfo.placeImage!=null){
            this.HandImgSzie(this.PayDetailInfo.placeImage)
            return
          }
        },
        //-- 关闭图片
        closeImg() {
          this.showImg = false
        },
        //--- 图片处理
        HandImgSzie(TGImgSrc){
          var that=this
          var TgImg=new Image()  //图片对象
          TgImg.src=TGImgSrc
          TgImg.onload=function(){
            var rate=TgImg.width/TgImg.height   //  原始图片的宽高比
            var ImgDivWidth=that.ScreenWidth*0.99
            var ImgDivHight=(that.ScreenWidth*0.99)/rate;
            //---样式
            that.styleObject= {
              width:ImgDivWidth+"px",
              height:ImgDivHight+'px'
            }
            //---显示
            that.showImg = true
          };
        },
        //----获取支付信息
        payFee(){  //plateNo,  plateColor,  JNopenid  ZQOpneid
          var that=this
          if(this.PayDetailInfo.parkFee > this.PayDetailInfo.advancePayment){   //应付大于预付 再触发缴费
            inParkPay(this.PayDetailInfo.plateNo,this.PayDetailInfo.plateColor,this.JNOpenId,this.ZQOpenId).then((res)=>{
              that.toPayInfo=res
              //---下单触发支付
              that.ToPayFee()
            },(err)=>{
              Toast.fail('下单失败')
            })
          }else{
            Toast.fail('无需缴费')
          }
        },
        // 下单触发支付
        // ---调起支付
        ToPayFee() {
          //  微信环境
          if (typeof WeixinJSBridge == "undefined"){
            if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
          }else{
            this.onBridgeReady();
          }
        },
        //  请求支付
        onBridgeReady(){
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              "appId": this.toPayInfo.appId,     //公众号名称，由商户传入
              "timeStamp":  String(this.toPayInfo.timeStamp),         //时间戳，自1970年以来的秒数
              "nonceStr": this.toPayInfo.nonceStr, //随机串
              "package": "prepay_id="+this.toPayInfo.prepay_id,
              "signType":"MD5",         //微信签名方式：
              "paySign": this.toPayInfo.paySign //微信签名
            },
            function(res){
              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                //成功关闭页面
                WeixinJSBridge.call('closeWindow');
              }else{
                alert('调起支付失败')
              }
            }
          );
        }
      }
    };
</script>

<style scoped>
  .body{
    background: #F7F6F6;
    width: 100%;
    height: 96.6vh;
    padding-top: 20px;
  }
  .bag{
    background: white;
    width: 92%;
    margin: auto;
    padding-bottom: 10px;
  }
  .head-list{
    background-color: #3FA2FE;

  }
  .head-list>p{
    height: 48px;
    line-height: 48px;
    color: white;
  }
  .content-list{
    height: 50px;
    font-size: 17px;
  }
  .seimg{
    margin: 9px 5px;
    width: 72px;
    height: 28px;
    border: 1px solid white;
    border-radius: 15px;
    background-color: #3FA2FE;
    color: white;
  }
  .paybtn{
    background-color: #4797FD;
    height: 45px;
    color:white;
    border-radius: 4px;
  }
  .btndiv{
    margin-top: 30px !important;
  }
</style>
